/* 
-----------------------------
    : Custom - Menu css :
-----------------------------
*/
@mixin vertical-menu($rtl:false) {
  list-style: none;
  margin: 0;
  padding: 0 0 200px 0; 
  > li {
    position: relative;
    margin: 0;
    padding: 0;
    > a {
      @if $rtl {
        padding: 10px 30px;;
      }
      @else {
        padding: 10px 30px;;
      }
      display: block;
      color: $muted;
      > i {
        display: inline-block;
        width: 30px;
        font-size: 16px;
        vertical-align: middle;
      }
      > img {
        display: inline-block;
        width: 20px;
        vertical-align: middle;
        margin-right: 10px;
        filter: invert(0.6) sepia(1) saturate(1) hue-rotate(185deg);
      }
      > span {
        vertical-align: middle;
      }
    }
    &:hover > a {
      color: $primary;
      img {
        filter: invert(0.62) sepia(1) saturate(4.5) hue-rotate(199deg);
      }
    }
    &.active > a {
      color: $primary;
      img {
        filter: invert(0.62) sepia(1) saturate(4.5) hue-rotate(199deg);
      }
    }
    &.active {
      color: $primary;
    }
    .label,
    .badge {
      margin-top: 4px;
    }
  }
  li.vertical-header {
    @if $rtl {
      padding: 10px 15px 10px 25px;
    }
    @else {
      padding: 15px 25px 5px 25px;
    }    
    color: $white;
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: none;
  }
  li:first-child.vertical-header {
    padding: 5px 25px 5px 25px;
  }
  li > a > .icon-chevron-right {
    width: auto;
    height: auto;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
    -webkit-transition: 0.3s ease-in;
    transition: 0.3s ease-in;
  }
  li.active {
    > a > .icon-chevron-right {
      transform: rotate(90deg);
    }
    > .vertical-submenu {
      display: block;
    }
  }
  a {
    color: $muted;
    text-decoration: none;
  }  
  .vertical-submenu {
    display: none;
    list-style: none;
    @if $rtl {
      padding: 5px 0 5px 5px;
    }
    @else {
      padding: 5px 0 5px 5px;
    }
    margin: 0 1px;
    background: transparent;
    .vertical-submenu {
      @if $rtl {
        padding-right: 15px;
      }
      @else {
        padding-left: 15px;
      }
    }
    > li {
      > a {
        @if $rtl {
          padding: 8px 55px 8px 25px;
        }
        @else {
          padding: 8px 25px 8px 55px;
        }
        display: block;
        font-size: 14px;
        color: $muted;
        > .mdi {
          font-size: 5px;
          margin-right: 10px;
          vertical-align: middle;
          color: $white;
        }
        > .icon-chevron-right,
        > .icon-chevron-down {
          width: auto;
        }
      }
      &.active > a {
        color: $primary;
        > .mdi {
          color: $primary;
        }
      }
      > a:hover {
        color: $primary;
        > .mdi {
          color: $primary;
        }
      }
    }
  }
}
.vertical-menu {
  @include vertical-menu;
}
.vertical-menu-rtl {
  @include vertical-menu(true);
}